<template>
  <div class="V-Details">
    <!-- 存放视频 -->
    <div class="head" @mouseover="According" @mouseout="Hidden">
      <video :src="this.videoUrl" controls ref="video"></video>
      <!-- <VDPlay v-show="VDPlay" :videoPlayflag="videoPlayflag" :videoNextflag="videoNextflag" :videoPlaylength="videoPlaylength" @getvideoplay="getvideoplay" ></VDPlay> -->
      <div class="VD-Play" v-show="VDPlay">
        <i
          class="iconfont icon-shangyishou i1"
          v-if="videoPrevflag == true"
          @click="additemFn(VDrecVideoList[videoindex])"
        ></i>
        <i
          class="iconfont icon-bofang1 i2"
          v-if="videoPlayflag == true"
          @click="getvideoplay(true)"
        ></i>
        <i
          class="iconfont icon-24gf-pause2 i2"
          v-if="videoPlayflag == false"
          @click="getvideoplay(false)"
        ></i>
        <i
          class="iconfont icon-xiayishou i3"
          v-if="videoNextflag == false"
          @click="nextitemFn(VDrecVideoList[videoindex])"
        ></i>
      </div>
    </div>
    <!-- 存放视频信息和相关视频内容 -->
    <div class="content">
      <h4>{{ this.videoData.name }}</h4>
      <p>{{ this.videoData.artistName }}上传</p>
      <p>
        <span> {{ getplayCount }}播放 </span>
        <b> {{ this.videoData.publishTime }} </b>
      </p>
      <div class="box">
        <h3>相关视频</h3>
        <!--  -->
        <VDRelated
          v-for="item in VDrecVideoList"
          :key="item.id"
          :VDrecVideoList="item"
          @click.native="itemFn(item)"
        ></VDRelated>
      </div>
    </div>
    <!-- 分享按钮 -->
    <div class="footer">
      <div class="btn">分享音乐</div>
    </div>
  </div>
</template>

<script>
import VDRelated from "../components/VD-Related.vue";
// import VDPlay from '../components/VD-Play.vue'
import {
  getVideoUrl,
  getVideoData,
  getvideoRelated,
} from "../request/api/VideoDetails.js";
import { recVideo } from "../request/api/Video.js";
export default {
  components: {
    VDRelated,
    //   VDPlay
  },
  created() {
    // console.log("视频详情页面获取的路由信息", this.$route);
    // 获取路由传递过来的对象
    this.videItem = this.$route.query.item;
    // 获取视频地址
    this.getvideoUrlF(this.videItem.id);
    // 获取视频的信息
    this.getgetVideoDataF(this.$route.query.item.id);
    // console.log(this.videItem);
    // 获取相关视频信息
    this.getvideoRelatedF(this.$route.query.item.id);

    this.getrecVideoList();
  },
  data() {
    return {
      videItem: {},
      videoUrl: "",
      videoData: {},
      videoRelated: [],
      videoPlayflag: true,
      videoPrevflag: false,
      videoNextflag: false,
      videoindex: 0,
      VDPlay: false,
      VDrecVideoList: [],
    };
  },
  methods: {
    itemFn(item) {
      this.getvideoUrlF(item.id);
      this.videoData = item;
    },
    // 定义一个方法，请求视频地址
    getvideoUrlF(id) {
      getVideoUrl("/mv/url", { id }).then((res) => {
        if (res.code == 200) {
          this.videoUrl = res.data.url;
        }
      });
    },
    // 请求视频信息
    getgetVideoDataF(id) {
      getVideoData("/mv/detail", { mvid: id }).then((res) => {
        this.videoData = res.data;
        // console.log(this.videoData);
      });
    },
    // 获取相关视频信息
    getvideoRelatedF(id) {
      getvideoRelated("/related/allvideo", { id }).then((res) => {
        this.videoRelated = res.data;
        this.videoPlaylength = res.data.length;
        // console.log("相关视频", this.videoRelated);
      });
    },
    getvideoplay(val) {
      if (val) {
        this.videoPlayflag = false;
        // console.log(this.$refs.video);
        this.$refs.video.play();
      } else {
        this.videoPlayflag = true;
        this.$refs.video.pause();
      }
    },
    getrecVideoList() {
      recVideo("/mv/all", { area: "日本", limit: 100 }).then((res) => {
        for (let index = 0; index < 5; index++) {
          let ran = Math.floor(Math.random() * 101);
          this.VDrecVideoList.push(res.data[ran]);
        }
        // console.log("VDrecVideoList", this.VDrecVideoList);
      });
    },
    // 移入事件
    According() {
      this.VDPlay = true;
    },
    Hidden() {
      this.VDPlay = false;
    },
    // 绑定切换点击事件
    nextitemFn(item) {
        if (this.videoindex <= 4) {
            this.videoPrevflag = true;
            this.getvideoUrlF(item.id);
            this.videoData = item;
            this.videoindex++;
        }
        if(this.videoindex > 4){
            this.videoNextflag = true
            this.videoindex -=1 
        }
    },
    additemFn(item){
        if (this.videoindex >= 0) {
            this.videoNextflag = false;
            this.getvideoUrlF(item.id);
            this.videoData = item;
            this.videoindex--;
        }
        if(this.videoindex < 0){
            this.videoPrevflag = false
            this.videoindex +=1
        }
    }
  },
  computed: {
    getplayCount() {
      if (this.videoData.playCount > 10000) {
        let nums = (this.videoData.playCount / 10000).toFixed(1) + "万";
        return nums;
      } else {
        return this.videoData.playCount;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.V-Details {
  height: 100%;
  position: relative;
  .head {
    width: 100%;
    video {
      width: 100%;
      height: 887px;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
    }
    .VD-Play {
      display: flex;
      align-items: center;
      position: fixed;
      top: 300px;
      left: 0;
      width: 100%;
      z-index: 999;
      //   width: 100%;
      color: #fff;
      i {
        font-size: 200px;
      }
      .i1 {
        position: fixed;
        top: 300px;
        left: 200px;
      }
      .i2 {
        position: fixed;
        top: 300px;
        left: 640px;
      }
      .i3 {
        position: fixed;
        top: 300px;
        right: 200px;
      }
    }
  }
  .content {
    padding: 887px 66px 230px;
    background: #fafafa;
    h4 {
      font-weight: 500;
      font-size: 1.1rem;
      margin: 50px 0;
    }
    p {
      font-size: 0.9rem;
      color: #646464;
    }
    h3 {
      margin: 20px 0;
      font-weight: 500;
    }
  }
  .footer {
    width: 100%;
    height: 230px;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    .btn {
      width: 800px;
      height: 180px;
      text-align: center;
      line-height: 180px;
      background: #22d59c;
      color: #fff;
      border-radius: 90px;
    }
  }
}
</style>